<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的入门用法</title>
    <script src="../plugins/vue/vue.min.js"></script>

</head>
<body>

    <div id="app">
        语法解释： 关键字in左边的i，表示遍历过程中的每一个被遍历的值<br/>
                关键字in右边的users，表示要遍历的vue中的某一个变量
        <div v-for="i in users">
            {{i}}
        </div>

        <hr/>
        <div v-for="i in studentList">
           姓名： {{i.name}} <br/>
           年龄： {{i.age}} <br/>
           地址： {{i.address}} <br/>
        </div>

    </div>

</body>

<script>
    new Vue({
        el:"#app",//xxx与第3步中定义的id的值保持一致
        data:{//用来定义变量的
            users : ["张三","李四","王五","赵六"], //在vue中定义了一个数组的变量
            studentList:[
                {"name":"张三1",age:18,"address":"湖北武汉1"},
                {"name":"张三2",age:13,"address":"湖北武汉2"},
                {"name":"张三3",age:15,"address":"湖北武汉3"},
                {"name":"张三4",age:16,"address":"湖北武汉4"},
                {"name":"张三5",age:17,"address":"湖北武汉5"},
            ]
        },
        methods:{//用来定义自定义界面事件的

        }

    })

</script>
</html>